
body{
    max-width:750px;
    min-width: 320px;
    width: 20rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica;
    background-color: #F2F4F7;
}

//felxible 设置最大750px时 字体也不会变大
@media screen and (min-width:750px) {
    html{
        font-size: 37.5px !important;
    }
}
.wrapper{
    background-color: #FFFFFF;
}
.header{
    width: 20rem;
    height: 2.1333rem;
    border-bottom: .0267rem solid #EAEAEA;

    text-align: center;
    font-size: .9333rem;
    color: #1C1C1C;
    line-height: 2.1333rem;
}
a{
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.nav{
    display: flex;
    flex-wrap: wrap;
    padding:1.1733rem 0 1.6rem 0;
    a{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 33.33%;
        img{
            width: 3.7067rem;
            height: 3.7067rem;
        }
        span{
            font-size: .6667rem;
            color: #707070;
        }
        &:nth-child(-n+3){
            margin-bottom: 1.8667rem;
        }
    }
}
.go{
    padding: 0 .2667rem 1.12rem .48rem;
    height: 4.0533rem;
    img{
        width: 19.2533rem;
        height: 4.0533rem;
    }
}
.content{
    padding:1.0667rem .5867rem 0;
    background-color: #FFFFFF;
    margin-top: .2667rem;
    // height: 15.3333rem;

    .top{
        position: relative;
        display: flex;
        align-items: center;
        margin-bottom: .9067rem;
        img{
            width: 1.0133rem;
        }
        span{
            margin-left: .48rem;
            font-size: .7467rem;
            color: #333333;
            font-weight: Bold;
        }
        a{
            position: absolute;
            right: 0;
            font-size: .5867rem;
            color: #999999;
        }
    }
    //第二个轮播图
    .bottom{
        position: relative;
        // overflow: hidden;
        .swiper-container {
            // position: relative;
            width: 14.4533rem;
            height: 100%;
            margin: 0 auto;
            overflow: hidden;
            text-align: center;

            p{
                width: 100%;
                font-size: .6667rem;
                color: #333333;
                margin: 0;
                margin-top: .64rem;
                padding-bottom: 1.0133rem;
            }
        }
        .swiper-slide {
            text-align: center;
            font-size: .48rem;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;

            //修改
            flex-direction: column;

            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            transition: 300ms;
            // 两边图片缩放为0.8
            transform: scale(0.8);
            opacity: 0.5;
            a{
                width: 9.0133rem;
                height: 10.0267rem;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        // 中间图片 0.8-> 1
        .swiper-slide-active,
        .swiper-slide-duplicate-active{
            transform: scale(1);
            opacity: 1;
            z-index: 999;
        }
        .swiper-button-next:after,
        .swiper-button-prev:after{
            color: black;
            font-size: .6667rem;
            font-weight: bold;
        }
    }
    //第二个轮播图
    .study_bottom{
        padding-bottom: .9333rem;
        .swiper {
            width: 100%;
            height: 100%;
            padding: 3px;
          }
          .swiper-slide {
            text-align: center;
            // font-size: .48rem;
            // background: pink;
            width: 7.7333rem;
            height: 9.0667rem;
            border-radius: .2667rem;
            box-shadow: 0 0 3px rgba(196, 189, 189, 0.8);
            a{
                // position: relative;
                display: flex;
                flex-direction: column;
                img{
                    margin: .2667rem auto;
                }
                p,span{
                    width: 7.2533rem;
                    margin: 0 auto;
                    font-size: .7467rem;
                    text-align: left;
                    color: #918f8f;
                }
                span{
                    font-size: .6933rem;
                    margin-top: .2667rem;
                    color: #ec3d3d;
                }
            }
          }
    
          .swiper-slide img {
            display: block;
            width: 7.2533rem;
            height: 4.56rem;
            object-fit: cover;
          }
    }
}
.footer-prev{
    width: 20rem;
    height: 3.0133rem;
}
.footer{
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translate(-50%);
    width: 20rem;
    height: 3.0133rem;
    background-color: #fff;
    z-index: 1111;
    display: flex;
    border: 1px solid #E2E2E2;
    a{
        flex: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        img{
            width: 1.0667rem;
            height: 1.04rem;
            margin: .56rem 0 .2933rem 0;
        }
        span{
            font-size: .5867rem;
            color: #666666;
        }
    }
}